/**
 * @description  偏离度控制
 * @author
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin, Tooltip } from 'antd';
import { SecondHeaderC, TableC, FirstHeaderC } from '../../../comps';
import Style from './style.less';
import ketou from '../../../assets/busi/reportingServices/tick_icon.png';
import buketou from '../../../assets/busi/reportingServices/cross_icon.png';
import columnsDict from './columnsDict';
import imgWaring from '../../../assets/busi/reportingServices/cashManagementReport/waring.png';
const infoObj = { 1: '正偏离度绝对值超过0.5%', 2: '负偏离度绝对值超过0.25%', 3: '负偏离度绝对值连续两个交易日超过0.5%' };
class DeviationControl extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: {},
    };
  }

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {}

  //获取columns
  getColumns = (title) => {
    let columns = [];
    columnsDict.map((item) => {
      if (item.title == title) {
        columns = item.columns;
      }
    });
    return columns;
  };
  //明细打开关闭 type ==》false true  row当前条目相关数据
  changeStatus = (type, row) => {
    let data = this.props.data;
    data.map((item) => {
      if (item.title == row.title) {
        item.showDetail = type;
      }
    });
    this.props.changeData(data);
  };
  render() {
    const { data } = this.props;
    const { loading } = this.props;
    const iconInfo = {
      0: {
        className: 'prohibit',
        img: buketou,
        name: '禁止',
      },
      1: {
        className: 'adopt',
        img: ketou,
        name: '通过',
      },
    };
    let leftFn = () => {
      return (
        <div className={Style.WaringImg}>
          <img src={imgWaring} />
        </div>
      );
    };

    return (
      <>
        <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
          <FirstHeaderC title='偏离度控制' bottomHeight={false} Left={this.props.hasWaring ? leftFn() : null} />
        </div>
        {data &&
          data.map((r, index) => {
            return (
              <div key={index}>
                {r?.title && (
                  <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
                    <SecondHeaderC
                      title={r.title}
                      Left={
                        <div className={Style[iconInfo[r.state]?.className]} style={{ marginLeft: '20px' }}>
                          {' '}
                          <img src={iconInfo[r.state]?.img} /> {iconInfo[r.state]?.name}
                        </div>
                      }
                      bottomHeight={false}
                      arrowBtn={r.dataSource?.length ? true : false}
                      arrowBtnPosition={'right'}
                      arrowBtnTxt={'明细'}
                      showContent={r?.showDetail}
                      onExpendClick={(e) => this.changeStatus(e, r)} //展开箭头按钮事件
                    />
                  </div>
                )}
                {r?.showDetail && (r?.dataSource?.length != 0 || loading) && (
                  <div name={'xjgl-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
                    <TableC
                      columns={
                        this.getColumns(r.title)
                          ?.map((x) => {
                            if (x.key == 'PLDinfoId') {
                              x.render = (text, record) => {
                                if (text == null || text == undefined || text == '') return '--';
                                let temp = text.split(',');
                                return (
                                  <div>
                                    {temp?.map((item, key) => {
                                      return (
                                        <div key={key} className={item == 3 ? `${Style.red}  ${Style.infoDiv}` : Style.infoDiv}>
                                          {infoObj[item]}
                                        </div>
                                      );
                                    })}
                                  </div>
                                );
                              };
                              return {
                                ...x,
                              };
                            }
                            if (x.key == 'PLD' || x.key == 'prePLD') {
                              x.type = 'rate';
                              return {
                                ...x,
                              };
                            }
                            if (x.key == 'valuationMarketValue' || x.key == 'thirdPartyValuation') {
                              x.type = 'number';
                              x.toFixed = 2;
                              return {
                                ...x,
                              };
                            }
                            return x;
                          })
                          ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }]) //添加空列，解决表头导出的样式问题
                      }
                      dataSource={r?.dataSource || []}
                      hidePage={true}
                      rowKey='id'
                      rowClassName={(record) => {
                        return record.isRealHold === '0' ? `${Style.redCls}` : `table-row`;
                      }}
                    ></TableC>
                  </div>
                )}
              </div>
            );
          })}
      </>
    );
  }
}
export default connect(({ cashManagementReportM, loading }) => ({
  cashManagementReportM,
  loading: loading.effects['cashManagementReportM/queryReport'],
}))(DeviationControl);
